<template>
  <el-col class="app-v-center app-column app-flex-1" style="overflow-y: auto">
    <el-row
      class="app-h-56px app-fill-width app-h-end app-v-center px-4 app-bb-1px-l2"
      :gutter="10"
    >
      <el-select v-model="fieldId" class="mr-2" placeholder="请选择场地" @change="getDataList">
        <el-option
          :key="9999999"
          label="全部"
          :value="undefined"
        />
        <el-option
          v-for="p in palceList"
          :key="p.id"
          :label="p.name"
          :value="p.id"
        />
      </el-select>
      <el-button
        type="primary"
        @click="addAppointment()"
      >添加预约信息</el-button>
    </el-row>
    <el-table
      :data="dataList"
      class="app-flex-1"
      style="width: 100%; overflow-y: auto"
    >
      <el-table-column prop="name" align="center" label="比赛名称" />
      <el-table-column prop="fieldName" align="center" label="场地" />
      <el-table-column prop="beginTime" align="center" label="开始时间">
        <template slot-scope="scope">
          {{ scope.row.beginTime && scope.row.beginTime.replace('T',' ') }}
        </template>
      </el-table-column>
      <el-table-column prop="createTime" align="center" label="创建时间">
        <template slot-scope="scope">
          {{ scope.row.createTime && scope.row.createTime.replace('T',' ') }}
        </template>
      </el-table-column>
      <el-table-column prop="longTime" align="center" label="时长(小时)" />
      <el-table-column
        prop="state"
        align="center"
        label="支付状态"
      >
        <template slot-scope="scope">
          <span
            :style="{
              color: scope.row.state === 0 ? '#F60000' : ''
            }"
          >
            {{ scope.row.state === 0 ? '待支付' : '已支付' }}
          </span>
        </template>
      </el-table-column>
      <el-table-column width="200" prop="action" align="center" label="操作">
        <template slot-scope="scope">
          <el-select v-model="scope.row.status" class="mr-2" @change="updateAppointment(scope)">
            <el-option
              key="v0"
              label="未到场"
              :value="0"
            />
            <el-option
              key="v1"
              label="到场"
              :value="1"
            />
          </el-select>
          <!-- <el-button
            size="small"
            type="error"
            @click="editAppointment(scope.row)"
          >修改</el-button>
          <el-button
            size="small"
            type="warning"
            @click="deleteAppointment(scope.row)"
          >删除</el-button> -->
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      class="mb-10 mt-5"
      style="max-width: 100vw"
      background
      :current-page.sync="pageNo"
      :page-sizes="[10, 20, 50]"
      :page-size.sync="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="getDataList"
      @current-change="getDataList"
    />

    <el-dialog
      :title="isEdit ? '编辑比赛' : '添加比赛'"
      :visible.sync="showAppointmentDialog"
      width="800px"
    >
      <el-form
        ref="appointmentForm"
        :model="appointmentInfo"
        :rules="rules"
        label-width="120px"
        class="app-flex-1"
      >
        <el-form-item label="预约人" prop="name">
          <el-input
            v-model="appointmentInfo.name"
            placeholder="请输入预约人"
          />
        </el-form-item>
        <el-form-item label="手机" prop="mobile">
          <el-input
            v-model="appointmentInfo.mobile"
            placeholder="请输入预约人的手机号码"
          />
        </el-form-item>
        <el-form-item label="预约场地" prop="fieldId">
          <el-select
            v-model="appointmentInfo.fieldId"
            placeholder="请选择预约场地"
          >
            <el-option
              v-for="place in palceList"
              :key="place.id"
              :label="place.name"
              :value="place.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="预约时间" prop="beginTime">
          <el-date-picker
            v-model="beginDate"
            type="date"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            :picker-options="{
              disabledDate(time) {
                return time.getTime() < Date.now()
              },
            }"
            placeholder="选择预约日期"
          />

          <el-time-select
            v-model="beginTime"
            class="ml-2"
            :picker-options="{
              start: '09:00',
              step: '01:00',
              end: '19:00'
            }"
            placeholder="选择预约开始时间"
            @change="generateLongTimeList"
          />
        </el-form-item>
        <el-form-item label="预约时长" prop="longTime">
          <el-select
            v-model="appointmentInfo.longTime"
            :disabled="!beginTime"
            placeholder="请选择预约时长"
          >
            <el-option
              v-for="time,index in longTimeList"
              :key="index"
              :label="time.label"
              :value="time.value"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer app-h-end">
        <el-button @click="showAppointmentDialog = false">取 消</el-button>
        <el-button
          type="primary"
          @click="submitAppointmentInfo"
        >确认</el-button>
      </div>
    </el-dialog>
  </el-col>
</template>

<script>
import {
  getAppointmentList,
  addAppointment,
  // deleteAppointment,
  getPlaceList,
  updateAppointment
} from '@/api/user'
import { host } from '@/utils/request'

const allLongTimeList = [{
  value: 1,
  label: '1小时'
},{
  value: 2,
  label: '2小时'
},{
  value: 3,
  label: '3小时'
},{
  value: 4,
  label: '4小时'
},{
  value: 5,
  label: '5小时'
},{
  value: 6,
  label: '6小时'
},{
  value: 7,
  label: '7小时'
},{
  value: 8,
  label: '8小时'
},{
  value: 9,
  label: '9小时'
},{
  value: 10,
  label: '10小时'
},{
  value: 11,
  label: '11小时'
}]
export default {
  data: () => ({
    host,
    rules: {
      name: [{ required: true, message: '请输入名字', trigger: 'blur' }]
    },
    isEdit: false,
    showAppointmentDialog: false,
    beginDate: '',
    beginTime: '',
    appointmentInfo: {
      beginTime: '',
      fieldId: null,
      longTime: null,
      mobile: '',
      name: ''
    },
    dataList: [],
    type: undefined,
    pageNo: 1,
    pageSize: 10,
    total: 0,
    palceList: [],
    fieldId: undefined,
    longTimeList: allLongTimeList
  }),
  mounted() {
    this.getDataList()
    // 场地用于选取
    getPlaceList({
      pageNo: 1,
      pageSize: 999
    }).then((res) => {
      if (res.code === 200) {
        this.palceList = res.data.dataList
      }
    })
  },
  methods: {
    generateLongTimeList() {
      console.log(this.beginTime)
      this.longTimeList = allLongTimeList.slice(0,20 - parseInt(this.beginTime))
    },
    addAppointment() {
      this.isEdit = false
      this.appointmentInfo = {
        name: '',
        mobile: '',
        fieldId: null,
        beginTime: '',
        longTime: 1
      }
      this.showAppointmentDialog = true
      this.$nextTick(() => {
        this.$refs.appointmentForm.clearValidate()
      })
    },
    editAppointment(item) {
      this.isEdit = true
      this.appointmentInfo = { ...item }
      console.log(item)
      if (item.beginTime) {
        this.beginDate = item.beginTime.split('T')[0]
        this.beginTime = item.beginTime.split('T')[1].slice(0,-3)
      }
      this.showAppointmentDialog = true
      this.$nextTick(() => {
        this.$refs.appointmentForm.clearValidate()
      })
    },
    updateAppointment(scope) {
      updateAppointment(scope.row).then((res) => {
        if (res.code === 200) {
          this.$message.success('修改成功')
        }
      })
    },
    // deleteAppointment(item) {
    //   this.$confirm(`确认删除${item.name}的预约, 是否继续?`, '提示', {
    //     confirmButtonText: '确定',
    //     cancelButtonText: '取消',
    //     type: 'warning'
    //   })
    //     .then(() => {
    //       deleteAppointment(item).then((res) => {
    //         if (res.code === 200) {
    //           this.getDataList()
    //           this.$message.success('删除成功')
    //         }
    //       })
    //     })
    //     .catch(() => {})
    // },
    submitAppointmentInfo() {
      this.appointmentInfo.beginTime = this.beginDate + 'T' + this.beginTime + ':00'
      addAppointment(this.appointmentInfo).then((res) => {
        if (res.code === 200) {
          if (this.appointmentInfo.id) {
            this.$message.success('修改成功')
          } else {
            this.$message.success('添加成功')
          }
          this.showAppointmentDialog = false
          this.pageNo = 1
          this.getDataList()
        }
      })
    },
    getDataList() {
      const params = {
        pageNo: this.pageNo,
        pageSize: this.pageSize,
        name: this.searchText,
        fieldId: this.fieldId
      }
      getAppointmentList(params).then((res) => {
        if (res.code === 200) {
          this.dataList = res.data.dataList
          this.total = res.data.total
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.avatar-uploader {
  width: 80px;
  height: 80px;
}
.bg-uploader {
  width: 160px;
  height: 160px;
}

.uploader {
  border: 1px solid #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.uploader img {
  width: 100%;
  height: 100%;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
</style>
